import React, { useEffect, useState } from 'react';
import { Typography, Card, Row, Col, Statistic } from 'antd';
import ReactECharts from 'echarts-for-react';
import axios from 'axios';

const { Title } = Typography;

// 接口类型定义
interface Enterprise {
  name: string;
  revenue: number;
  totalComprehensiveIncome: number;
}

interface TotalData {
  totalEnterprises: number;
  newEnterprises: number;
  industries: number;
  growthTrend: number[];
  industryDistribution: { value: number; name: string }[];
  enterpriseList: Enterprise[];
}

const TotalPage: React.FC = () => {
  const [data, setData] = useState<TotalData>({
    totalEnterprises: 0,
    newEnterprises: 0,
    industries: 0,
    growthTrend: [],
    industryDistribution: [],
    enterpriseList: [],
  });

  useEffect(() => {
    axios
      .get<TotalData>('http://localhost:5000/api/total')
      .then((response) => setData(response.data))
      .catch((error) => console.error('Error fetching total data:', error));
  }, []);

  const growthChartOptions = {
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月'],
    },
    yAxis: { type: 'value' },
    series: [
      {
        type: 'line',
        data: data.growthTrend,
        smooth: true,
        lineStyle: { color: '#1890ff', width: 3 },
        areaStyle: { color: 'rgba(24, 144, 255, 0.2)' },
      },
    ],
    tooltip: { trigger: 'axis' },
    grid: { left: '10%', right: '10%', bottom: '10%', containLabel: true },
  };

  const industryChartOptions = {
    series: [
      {
        type: 'pie',
        data: data.industryDistribution,
        radius: ['40%', '70%'],
        label: { formatter: '{b}: {d}%', color: '#333' },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
    tooltip: { trigger: 'item' },
  };

  const top10Revenue = [...data.enterpriseList]
    .sort((a, b) => b.revenue - a.revenue)
    .slice(0, 10);

  const revenueChartOptions = {
    xAxis: {
      type: 'category',
      data: top10Revenue.map((e) => e.name),
      axisLabel: { rotate: 30, interval: 0 },
    },
    yAxis: {
      type: 'value',
      name: '营业收入',
    },
    series: [
      {
        type: 'bar',
        data: top10Revenue.map((e) => e.revenue),
        itemStyle: {
          color: '#73c0de',
          borderRadius: [4, 4, 0, 0],
        },
      },
    ],
    tooltip: { trigger: 'axis' },
    grid: { left: '5%', right: '5%', bottom: '20%', containLabel: true },
  };

  const top10Income = [...data.enterpriseList]
    .sort((a, b) => b.totalComprehensiveIncome - a.totalComprehensiveIncome)
    .slice(0, 10);

  const incomeChartOptions = {
    xAxis: {
      type: 'category',
      data: top10Income.map((e) => e.name),
      axisLabel: { rotate: 30, interval: 0 },
    },
    yAxis: {
      type: 'value',
      name: '综合收益',
    },
    series: [
      {
        type: 'bar',
        data: top10Income.map((e) => e.totalComprehensiveIncome),
        itemStyle: {
          color: '#91cc75',
          borderRadius: [4, 4, 0, 0],
        },
      },
    ],
    tooltip: { trigger: 'axis' },
    grid: { left: '5%', right: '5%', bottom: '20%', containLabel: true },
  };

  return (
    <div
      style={{
        padding: '20px',
        minHeight: '100vh',
        background: 'linear-gradient(to bottom, #f0f5ff, #ffffff)',
      }}
    >
      <Title
        level={2}
        style={{
          textAlign: 'center',
          marginBottom: '30px',
          color: '#333',
          fontWeight: 'bold',
          textShadow: '1px 1px 2px rgba(0, 0, 0, 0.2)',
        }}
      >
        入驻企业总览
      </Title>

      {/* 卡片区 */}
      <Row gutter={[16, 16]} style={{ marginBottom: '30px' }}>
        <Col span={8}>
          <Card
            title="入驻企业总数"
            bordered={false}
            style={{
              borderRadius: '12px',
              boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
              background: 'linear-gradient(to bottom, #e6f7ff, #ffffff)',
            }}
          >
            <Statistic
              value={data.totalEnterprises}
              suffix="家"
              valueStyle={{ color: '#1890ff', fontWeight: 'bold' }}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card
            title="本月新增企业"
            bordered={false}
            style={{
              borderRadius: '12px',
              boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
              background: 'linear-gradient(to bottom, #fffbe6, #ffffff)',
            }}
          >
            <Statistic
              value={data.newEnterprises}
              suffix="家"
              valueStyle={{ color: '#faad14', fontWeight: 'bold' }}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card
            title="行业覆盖数"
            bordered={false}
            style={{
              borderRadius: '12px',
              boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
              background: 'linear-gradient(to bottom, #f6ffed, #ffffff)',
            }}
          >
            <Statistic
              value={data.industries}
              suffix="个行业"
              valueStyle={{ color: '#52c41a', fontWeight: 'bold' }}
            />
          </Card>
        </Col>
      </Row>

      {/* 图表区一 */}
      <Row gutter={[16, 16]} style={{ marginBottom: '30px' }}>
        <Col span={12}>
          <Card
            title="企业增长趋势"
            bordered={false}
            style={{
              borderRadius: '12px',
              boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
              background: '#ffffff',
            }}
          >
            <ReactECharts option={growthChartOptions} style={{ height: '300px' }} />
          </Card>
        </Col>
        <Col span={12}>
          <Card
            title="评分分布"
            bordered={false}
            style={{
              borderRadius: '12px',
              boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
              background: '#ffffff',
            }}
          >
            <ReactECharts option={industryChartOptions} style={{ height: '300px' }} />
          </Card>
        </Col>
      </Row>

      {/* 图表区二 */}
      <Row gutter={[16, 16]} style={{ marginBottom: '30px' }}>
        <Col span={24}>
          <Card
            title="营业收入排行榜（Top 10）"
            bordered={false}
            style={{
              borderRadius: '12px',
              boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
              background: '#ffffff',
            }}
          >
            <ReactECharts option={revenueChartOptions} style={{ height: '400px' }} />
          </Card>
        </Col>
      </Row>

      {/* 图表区三 */}
      <Row gutter={[16, 16]}>
        <Col span={24}>
          <Card
            title="综合收益排行榜（Top 10）"
            bordered={false}
            style={{
              borderRadius: '12px',
              boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
              background: '#ffffff',
            }}
          >
            <ReactECharts option={incomeChartOptions} style={{ height: '400px' }} />
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default TotalPage;
